<template>
    <div class="basic-container">
        <el-container>
            <el-main>
                <div class="settle-box">
                    <router-view @footerHide="footerHide" class="box" :class="{noBt:hide}"></router-view>
                    <div class="techSupport" v-if="!hide">@杭州数动云提供技术支持</div>
                </div>
            </el-main>
            <el-footer :height="'auto'">
                <div class="footer">
                    <div @click="jump('/home')" :class="{active: footerActive('/home')}">
                        <i class="el-icon-s-home"></i>
                        <p>首页</p>
                    </div>
                    <div @click="jump('/my')" :class="{active: footerActive('/my')}">
                        <i class="el-icon-s-custom"></i>
                        <p>我的</p>
                    </div>
                </div>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                hide: false
            }
        },
        mounted() {
        },
        methods: {
            footerHide() {
                this.hide = true
            },
            jump(path) {
                if (this.$route.path !== path) {
                    this.$router.push(path)
                }
            },
            footerActive(path) {
                if (this.$route.path === path) {
                    return true
                }
            }
        },
        components: {},
        beforeRouteUpdate(to, from, next) {
            this.hide = false
            next()
        }
    }
</script>

<style scoped lang="less">
    .el-container, .el-main {
        height: 100%;
    }

    .el-header, .el-main, .el-footer {
        padding: 0 !important;
    }

    .el-header, .el-footer {
        z-index: 8;
    }

    .basic-container, .settle-box {
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    .settle-box {
        overflow-y: auto;

        .box {
            width: 100%;
            min-height: 100%;
            overflow-x: hidden;
            padding-bottom: .6rem;

            &.noBt {
                padding-bottom: 0;
            }
        }
    }

    .techSupport {
        width: 100%;
        height: .6rem;
        line-height: .6rem;
        text-align: center;
        color: #fff;
        font-size: .24rem;
        margin-top: -.6rem;
        position: relative;
        z-index: 1;
    }

    .footer {
        /*height: .8rem;*/
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 2px -1px rgba(0, 0, 0, .5);

        div {
            flex: 1;
            text-align: center;
            font-size: .24rem;
            line-height: .24rem;
            padding: .1rem;
            color: #b1b1b1;

            i {
                font-size: .48rem;
                margin-bottom: .1rem;
                line-height: .4rem;
            }

            &.active {
                color: #598CDA;
            }
        }
    }
</style>
